<link rel="stylesheet" href="/css/snaker.css" type="text/css" media="all" />
<script src="/js/raphael-min.js" type="text/javascript"></script>
<script src="/js/snaker/snaker.designer.js" type="text/javascript"></script>
<script src="/js/snaker/snaker.model.js" type="text/javascript"></script>
<script src="/js/snaker/snaker.editors.js" type="text/javascript"></script>

<div class="row">
	<div class="col-lg-12">
		<h1 class="site-h1">
			流程信息
		</h1>
		<div class="row">
			<div class="col-lg-3" style="padding:10px 0px 20px 20px;">
				流程名称：
				${order.processName!''}
			</div>
			<div class="col-lg-5" style="padding:10px 0px 20px 20px;">
				<span class="title-strong">流程编号：</span>${order.orderNo!''}			
			</div>
			<div class="col-lg-4" style="padding:10px 0px 20px 20px;">
				<span class="title-strong">流程创建时间：</span>${order.createTime!''}
			</div>
		</div>
	</div>
</div>
<#if tasks?? && tasks?size gt 0>
<div class="row">
	<div class="col-lg-12">
		<table class="layui-table" lay-skin="line">
		  <colgroup>
				<col width="30%">
				<col width="5%">
				<col width="1%">
				<col width="1%">
				<col width="1%">
				<col>
		  </colgroup>
		  <thead>
				<tr>
					<th>任务名称</th>
					<th nowrap="nowrap">流程节点名称</th>
					<th nowrap="nowrap">任务创建时间</th>
					<th nowrap="nowrap">任务完成时间</th>
					<th nowrap="nowrap">任务处理人</th>
				</tr>
			</thead>
			<tbody>
					<#list tasks as task>
					<tr>
						<td>								
							<a href="javascript:void(0)" title="查看详情"><i class="itemicon ds-task"></i>${task.displayName!''}</a>							
						</td>
						<td nowrap="nowrap">${task.taskName!''}</td>
						<td nowrap="nowrap">${task.createTime!''}</td>
						<td nowrap="nowrap">${task.finishTime!''}</td>
						<td nowrap="nowrap">${task.operator!''}</td>
					</tr>
					</#list>
			</tbody>
		</table>
	</div>	
</div>
</#if>
<div class="row">
	<div class="col-lg-12">
		<h1 class="site-h1">
			实例流程图
		</h1>
		<div class="row">
			<div class="col-lg-12" id="snakerflow">
		
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$.ajax({
		type:'GET',
		url:"/apps/bpm/json.html",
		data:"processid=${processid!''}&orderid=${orderid!''}",
		async: false,
		globle:false,
		error: function(){
			alert('数据处理错误！');
			return false;
		},
		success: function(data){
			display(data.process, data.active);
		}
	});
	function display(process, active) {
		/** view*/
		$('#snakerflow').snakerflow($.extend(true,{
			basePath : "/js/snaker/",
            ctxPath : "/",
            orderId : "${orderid!''}",
			restore : eval("(" + process + ")")
			,
			editable : false
			},eval("(" + active + ")")
		));
	}
</script>